<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>新用户注册</title>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/common/jquery-1.8.2.min.js"></script>
<jsp:include page="/common/bootstrap.jsp"></jsp:include>
<link rel="stylesheet" href="<%=request.getContextPath() %>/common/bootstrap/css/bootstrap.css" type="text/css"></link>

<script type="text/javascript">
	$(document).ready(function(){
		var error = false;
		$("#username").blur(function(){
			var username = $("#username").val();
			if(username == '') {
				showError('username', '账户不能为空');
				error = false;
				return;
			}else{
				error = true; 
				$("#username").css({"border-color":"green"});
			}
		});

		$("#newpass").blur(function(){
			var newpass = $("#newpass").val();
			if(newpass == '') {
				showError('newpass', '新密码不能为空');
				error = false;
			}
			else {
				error = true; 
				$("#newpass").css({"border-color":"green"});
				$("#newpassTip").css({"display":"none"});
			}
		});

		$("#newpassAgain").blur(function(){
			var newpass = $("#newpass").val();
			if(newpass == '') {
				showError('newpass', '新密码不能为空');
				error = false;
				return;
			}else{
				error = true; 
			}

			var newpassAgain = $("#newpassAgain").val();
			if(newpassAgain != newpass) {
				showError('newpassAgain', '与输入的新密码不一致');
				error = false;
			}
			else {
				error = true; 
				$("#newpassAgain").css({"border-color":"green"});
				$("#newpassAgainTip").css({"display":"none"});
			}
		});
		
		$("#userForm").submit(function(e){
			e.preventDefault();
			$(":input").blur();
			if(error){
				var url = "<%=request.getContextPath()%>/user/register.do";
				var data = $("#userForm").serialize();
				$.ajax({
					type:"post",
					url:url,
					data:data,
					success:function(){
						$("#content").append($("#username").val()+"，为了更好的体验，请尽快完善你的个人信息。");
						$('#myModal').modal({    backdrop:true,    keyboard:true,    show:true});
						$('#myModal').on('hidden', function () {
							location.href='login.jsp';
						})
					}
				});
			};
		});		
	});

	function showError(formSpan, errorText) {
		$("#" + formSpan).css({"border-color":"red"});
		$("#" + formSpan + "Tip").empty();
		$("#" + formSpan + "Tip").append(errorText);;
		$("#" + formSpan + "").popover('show')
	}
</script>
</head>
<body>
	<div class="container">
		<h1>注    册 <i class="glyphicon glyphicon-user"></i></h1>
		<hr>
		<form id="userForm">
			<div class="form-group">
					<label for="loginname" class="col-sm-2 control-label">用户名</label> 
					<input type="text" name="loginname" id="username"  class="form-control" id="loginname" 
					placeholder="登陆账号">
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1" class="col-sm-2 control-label">密码</label> <input
					type="password" id="newpass" name="password" class="form-control" id="exampleInputPassword1"
					placeholder="Password">
			</div>
			  <div class="form-group" class="col-sm-2 control-label">
			    <label for="newpassAgain" class="col-sm-2 control-label">再次确认新密码</label>
			      <input type="password" class="form-control" id="newpassAgain" placeholder="Again New Password" data-toggle="popover" data-placement="top" title="注意" data-content="密码要一致啊"/>
			  </div>
			<div class="form-group">
				<label class="col-sm-2 control-label"> </label>
				<button type="submit" class="btn btn-success " id="submit"
					style="text-align:center;">确认</button>
			</div>
		</form>
	</div>
	
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">恭喜您注册成功！</h4>
      </div>
      <div class="modal-body" id="content">
       	您的账号是：
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>